<style scoped lang="less">
	.header {
		width: 100%;
		height: 10%;
		// border: 1px solid red;
		display: flex;
		justify-content: space-between;

		.left {
			width: 30%;
			height: 100%;
			// background-color: antiquewhite;
			font-size: 18px;
			color: #ababab;
			display: flex;
			align-items: center;
			// justify-content: space-between;
		}

		.right {
			width: 14%;
			height: 100%;
			// background-color: antiquewhite;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addBtn {
				background-color: #00a0e9;
				border: none;
				float: right;
				margin-right: 20px;
			}
		}
	}

	.isShow {
		font-size: 18px;
		font-weight: 700;
		color: #000;
	}

	.noShow {
		font-size: 18px;
		color: #ababab;
	}

	.contentOne {
		margin-top: 2%;
		width: 100%;
		// border:1px solid red;
		display: flex;
		flex-wrap: wrap;

		.course {
			width: 22%;
			height: 28vh;
			border: 1px solid blue;
			margin: 1%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.check{
				position: absolute;
				top:-10px;
				right: 0px;
			}
		}
	}

	.add {
		width: 60%;
		// height: 5vh;
		// border:1px solid red;
		display: flex;
		margin: 0 auto;
		align-items: center;
		margin-top: 10%;
		margin-bottom: 10%;
	}

	.el-input {
		width: 70%;
	}

	.dialog-footer {
		width: 94%;
		// border: 1px solid red;
	}
	.del{
		// border:1px solid red;
		text-align: center;
		font-size: 20px;
		margin: 5% 0 5% 0;
	}
	.courseName{
		// border:1px solid red;
		width: 90%;
		height: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.contentTwo{
		width: 90%;
		height: 80%;
		// bordeR:1px solid red;
		background-color: #fff;
		text-align: center;
		// padding: 10px;
		margin: 0 auto;
		padding: 20px 20px;
		box-sizing: border-box;
		
	}
	.el-table td.el-table__cell div {
		text-align: center;
	}
	
	.el-table th.el-table__cell>.cell {
		text-align: center;
	}
	
	.tableFrom {
		background: white;
		text-align: center;
		// margin-top: 10px;
	}
	
	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		// border-bottom: 1px solid #333;
		text-align: center;
		
	}
	
	.el-table--border,
	.el-table--group {
		// border: 1px solid #333;
		text-align: center;
		
	}
	
	.el-table--border .el-table__cell,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
		// border-right: 1px solid #333;
		text-align: center;
		
	}

</style>
<template>
	<div class="header">
		<div class="left">
			<span style="cursor: pointer;" :class="{isShow : tapFlag}" @click="tap">课程</span>
			<span :class="{isShow : !tapFlag}" @click="tap" style="margin-left: 2%;cursor: pointer;">班级</span>
			<el-select
			      v-model="sevalue"
			      placeholder="请选择班级"
			      size="large"
			      style="width: 240px;margin-left: 2%;"
				  v-if="tapFlag==false"
				  @change="changeClass"
			    >
			      <el-option
			        v-for="item in classArr"
			        :key="item.clazzId"
			        :label="item.clazzName"
			        :value="item.clazzId"
					@click="nameFn(item.clazzName)"
			      />
			    </el-select>
		</div>
		<div class="right" v-if="tapFlag==true">
			<el-button class="addBtn" type="info" :icon="CirclePlus" @click="dialogVisible = true" v-if="!checkFlag">添加</el-button>
			<el-button type="success" @click="check" v-if="!checkFlag">选择</el-button>
			<el-button  type="danger" v-if="checkFlag" @click="godel">删除</el-button>
			<el-button type="primary" @click="discheck" v-if="checkFlag">取消</el-button>
			
		</div>
		<div class="right" v-if="tapFlag==false">
			<!-- <el-button type="success" @click="discheck" >修改</el-button> -->
			<!-- <el-button class="addBtn" type="info" :icon="CirclePlus" @click="dialogVisible = true">添加</el-button> -->
			
		</div>
	</div>
	<div class="contentOne" v-if="tapFlag==true">
		<div class="course" v-for="item in Allcourse" >
		<el-checkbox class="check" v-if="checkFlag" @change="isChecked(item.subId)"></el-checkbox>
		<div class="courseName" @click="toDetail(item.subId)">{{item.subName}}</div>
		</div>
		
	</div>
	<div class="contentTwo" v-else>
		<h4 style="margin-bottom: 20px;">{{ className }}课程表</h4>
		<h4 v-if="tableFlag">{{ className }}还没有添加课程表哦~~</h4>
		<el-table :data="tableData" border   
			v-else :row-style="{ height: '70px' }"
		>
			<el-table-column prop="level" label="" align="center">
			</el-table-column>
			<el-table-column label="周一"  align="center">
				<template  #default="{row}">
					<p >{{ row.list[0].courseName}}</p>
					<p>{{ row.list[0].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周二" align="center">
				<template  #default="{row}">
					
					<p>{{ row.list[1].courseName }}</p>
					<p>{{ row.list[1].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周三" align="center">
				<template  #default="{row}">
					<p>{{ row.list[2].courseName }}</p>
					<p>{{ row.list[2].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周四" align="center">
				<template  #default="{row}">
					<p>{{ row.list[3].courseName }}</p>
					<p>{{ row.list[3].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周五" align="center">
				<template  #default="{row}">
					<p>{{ row.list[4].courseName }}</p>
					<p>{{ row.list[4].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周六" align="center">
				<template  #default="{row}">
					<p>{{ row.list[5].courseName }}</p>
					<p>{{ row.list[5].courseTea }}</p>
				</template>
			</el-table-column>
			<el-table-column label="周日" align="center">
				<template  #default="{row}">
					<p>{{ row.list[6].courseName }}</p>
					<p>{{ row.list[6].courseTea }}</p>
				</template>
			</el-table-column>
			</el-table>
	</div>
	<!-- 添加课程对话框 -->
	<el-dialog v-model="dialogVisible" title="请添加新的课程" width="500" center>
		<div class="add">
			<span>名称：</span>
			<el-input placeholder="请输入新的课程名称" v-model="addValue"></el-input>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="addCourse" style="background-color:#106ab1; color: white;">确 定</el-button>
				<el-button  @click="dialogVisible = false" style="background-color: #999999; color:white" >取 消</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 删除对话框 -->
	<el-dialog v-model="delVisible" width="500" center>
		<div class="del">
			<span>确定要删除该课程吗？</span>
			
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="delVisible = false">取消</el-button>
				<el-button type="primary" @click="del">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { addCourseList, classList, classTable, courseList, delCourse } from '@/api/gh';
	import { CirclePlus } from '@element-plus/icons-vue'
	import { ref } from 'vue';
	import { useRoute } from 'vue-router';
	import router from '@/router';
	import { ElMessage } from 'element-plus'
	let route = useRoute()
	//选择框是否显示
	let checkFlag=ref(false)
	//tap切换
	let tapFlag = ref(true)
	const tap = () => {
		tapFlag.value = !tapFlag.value
	}
	//获取所有课程列表
	let Allcourse = ref([]);
	const getCourseList = async () => {
		let res = await courseList()
		Allcourse.value = res
		// console.log("res", Allcourse.value)
	}
	getCourseList()
	//跳转至课程详情
	const toDetail = (courseId : number) => {
		router.push({
			name: "hidecourseDetail",
			path: "/hidecourseDetail",
			query: { "courseId": courseId }
		})
	}
	//添加课程
	let dialogVisible = ref(false)
	let addValue = ref("")
	const addCourse = async() => {
		dialogVisible.value = false;
		if(addValue.value != ""){
			let res = await addCourseList({
				subName:addValue.value
			})
			// console.log("添加kecheng",res)
			if(res===undefined){
				ElMessage.success({
					message:"添加成功"
				})
			}else{
				ElMessage.error({
					message:"操作失败"
				})
			}
		}
		addValue.value = ""
		getCourseList()
	}
	//选择
	const check =()=>{
		checkFlag.value = true
	}
	//取消选择
	const discheck=()=>{
		checkFlag.value = false
	}
	//已经选择的科目
	let checkArr = ref([]);
	const isChecked = (SubIds:number)=>{
		checkArr.value.push(SubIds)
		// console.log(checkArr.value)
	}
	//删除对话框
	let delVisible = ref(false)
	const godel=()=>{
		delVisible.value = true
	}
	//删除
	
	const del = async() =>{
		delVisible.value = false
		checkFlag.value = false
		if(checkArr.value.length>0){
			let res = await delCourse({
				SubIds:checkArr.value
			})
			console.log("删除",res)
			if(res===undefined){
				ElMessage.success({
					message:"删除成功"
				})
			}else{
				ElMessage.error({
					message:"操作失败"
				})
			}
		}
		getCourseList()
		
	}
	//获取所有班级
	let classArr:any= ref([]);
	const getClassList = async() =>{
		let res =await classList()
		// console.log("获取所有班级",res)
		classArr.value=res
	}
	getClassList()
	let sevalue = ref(111)//当前选中的班级的value
	let className =ref("一年级一班")
	let tableFlag = ref(false)// 表格是否显示
	//根据班级查询课程表
	let tableData = ref()
	let getTable = async() =>{
		let res = await classTable({
			clazzId:sevalue.value
		})
		
			let resData:any = res
			// console.log("resData[i][k].teaName",resData)
			let datas = []
			for (var i in resData) {
				// console.log(resData[i])
				let list = [];
				for (var k in resData[i]) {
					// if(k)
					// console.log("k",resData[i][k])
					list.push({
						courseName:resData[i][k].subName ,
						courseTea: resData[i][k].teaName,
						week: k,
						weekIndex: k.substring(1, 2)
					})
				}
				//排序list
				for (var m = 0; m < list.length; m++) {
					for (let k = m + 1; k < list.length; k++) {
						if (list[m].weekIndex > list[k].weekIndex) {
							let temp:any = list[m]
							list[m] = list[k]
							list[k] = temp
						}
					}
				}
				datas.push({
					index: i.substring(1, 2),
					level: i,
					list: list
				})
			}
			//console.log(datas)
			for (let i = 0; i < datas.length; i++) {
				for (let k = i + 1; k < datas.length; k++) {
					if (datas[i].index > datas[k].index) {
						let temp:any = datas[i]
						datas[i] = datas[k]
						datas[k] = temp
					}
				}
			}
			tableData.value = datas
			tableData.value.map(v => {
				if(v.list==''){
					tableFlag.value=true
				}else{
					tableFlag.value=false
				}
			});
			
		
		// tableData.value = res
		// console.log("当前本班级的课程表",tableData.value)
	}
	getTable()
	//切换班级时再次查询该班级的课程表
	let changeClass = async()=>{
		getTable()
	}
	const nameFn=(name:any)=>{
		className.value=name
	}
</script>